feat(gitlab): add frontend components for GitLab integration#7123
feat(gitlab): add frontend components for GitLab integration#7123asaphko wants to merge 2 commits intofeature/gitlab-webhookfrom
Conversation
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.
Once credits are available, reopen this pull request to trigger a review.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
bot
added
the
front-end
Docker builds report
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feature/gitlab-webhook #7123 +/- ##
=======================================================
Coverage 98.36% 98.36%
=======================================================
Files 1363 1363
Lines 51042 51042
=======================================================
Hits 50210 50210
Misses 832 832 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Failed testsfirefox › tests/change-request-test.pw.ts › Change Request Tests › Change requests can be created, approved, and published with 4-eyes approval @enterprise
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
|
asaphko
force-pushed
the
feature/gitlab-webhook
branch
from
adb7cc3 to
ae0f757
Compare
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
ddb97e1 to
0537578
Compare
github-actions
bot
added
feature
asaphko
force-pushed
the
feature/gitlab-webhook
branch
from
d9428ad to
5fa74ca
Compare
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
6eb7a75 to
2b80596
Compare
github-actions
bot
added
feature
asaphko
force-pushed
the
feature/gitlab-webhook
branch
from
a363c32 to
b8168b5
Compare
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
df4d3a4 to
d63d229
Compare
github-actions
bot
added
feature
asaphko
force-pushed
the
feature/gitlab-webhook
branch
from
3b7d878 to
48dc94c
Compare
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
e10af1d to
6cda95a
Compare
github-actions
bot
added
feature
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
bf8ae69 to
c662cd9
Compare
github-actions
bot
added
feature
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
d828b24 to
8d3fef8
Compare
github-actions
bot
added
feature
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
1f88d13 to
68b4ac2
Compare
github-actions
bot
added
feature
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
68b4ac2 to
618de96
Compare
github-actions
bot
added
feature
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
618de96 to
fe941ce
Compare
github-actions
bot
added
feature
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
26eb55a to
9fbe686
Compare
github-actions
bot
added
feature
Add RTK Query services, setup page, resource selector, and integration list support for the GitLab integration. Setup page split into three components per review feedback. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
asaphko
force-pushed
the
feature/gitlab-frontend
branch
from
9fbe686 to
c0aae63
Compare
for more information, see https://pre-commit.ci
github-actions
bot
added
feature
Zaimwa9
left a comment
Zaimwa9
left a comment
There was a problem hiding this comment.
I still have to go over the app and properly QA but here are some code-based comments.
Mostly:
- One syntax (# versus !) mismatch to display GL issues/MR
- Types definitely have room for improvements, it would be nice to have a dedicated pass over them
- The id/name encoding in
selectedProject - Quite some redundant code. At least it is properly isolated so I don't think this would be risky. Although this one could be easily addressed especially. The
Github/GitlabResourcesSelectcan be a follow-up depending on how fast we want to have this one out
| id: number | ||
| gitlab_instance_url: string | ||
| webhook_secret: string | ||
| project: number |
There was a problem hiding this comment.
It's missing project_name and tagging_enabled here while it's used in GitlabIntegrationDetails
There was a problem hiding this comment.
Yes I was surprised the build was green and the linter not crying. It's skipping some steps as it is not based on main
| .filter((v) => !value?.includes(v.web_url)) | ||
| .map((i: Res['GitlabResource']) => { | ||
| return { | ||
| label: `${i.title} !${i.iid}`, |
There was a problem hiding this comment.
| label: `${i.title} !${i.iid}`, | |
| label: `${i.title} #${i.iid}`, |
for issues no ?
| import Utils from 'common/utils/utils' | ||
|
|
||
| type CreateGitLabIntegrationFormProps = { | ||
| projectId: string |
There was a problem hiding this comment.
NIT: Our projectId typing is overall bad, let's be honest. But it's supposed to be an int. Can you throw a prompt to check its type over the gitlab components and favor number type if low effort (there are a lot of subsequent parseInt)
| }) | ||
| } | ||
|
|
||
| const addGitlabResource = ( |
There was a problem hiding this comment.
This look almost identical to addGithubResource, any way to cleanly merge them into addVCSResource?
| githubId={githubId} | ||
| resourceType={resourceType} | ||
| setResourceType={setResourceType} | ||
| onChange={addGithubResource as any} |
There was a problem hiding this comment.
Let's fix the type directly. I believe this should be:
onChange: (value: Res['GitlabResource'] | GithubResource) => void
Hence why I think we could probably merge them and avoid future drifting
| const [updateGitlabIntegration] = useUpdateGitlabIntegrationMutation() | ||
| const [deleteGitlabIntegration] = useDeleteGitlabIntegrationMutation() | ||
|
|
||
| const { data: gitlabIntegrations } = useGetGitlabIntegrationQuery( |
There was a problem hiding this comment.
Super NIT but we could use the loading state here to avoid a flash
| const { data: gitlabIntegrationData } = useGetGitlabIntegrationQuery( | ||
| { project_id: parseInt(props.projectId || '0') }, | ||
| { skip: !props.projectId }, | ||
| ) | ||
| const hasIntegrationWithGitlab = !!( | ||
| gitlabIntegrationData?.results?.length ?? 0 | ||
| ) |
There was a problem hiding this comment.
Duplicate of the hook. We should use the hook directly here
| @@ -0,0 +1,152 @@ | |||
| import React, { FC, useState } from 'react' | |||
There was a problem hiding this comment.
There's a lot of duplicated logic between this one and the github one.
I do understand we aim to go fast so I won't push for it and extend the QA because we broke a component (github) that works well while we wanted to iterate fast on this new one.
So I let you decide whether to go for this refactoring or not. Overall the 2 components could be merged. They could use a shared interface something like this:
type VcsResourcesSelectProps<TResource> = {
// Data
projects: { label: string; value: number }[]
resources: TResource[]
resourceTypes: { label: string; resourceType: string }[]
// State
isLoading: boolean
onSearch: (query: string) => void
// Callbacks
onProjectChange: (projectId: number) => void
onResourceTypeChange: (type: string) => void
onResourceSelect: (resource: TResource) => void
// Display
formatResourceLabel: (resource: TResource) => string
getResourceUrl: (resource: TResource) => string
// Filter
linkedUrls: string[]
}
So the Github/GitlabResourcesSelect are just in charge of using the queries and passing in the data.
| <label className='fw-bold mb-1'>GitLab Repository</label> | ||
| {gitlabIntegration.project_name ? ( | ||
| <div className='d-flex align-items-center'> | ||
| <code className='p-2 rounded flex-fill' style={{ backgroundColor: '#f0f1f3', color: '#1a2634' }}> |
There was a problem hiding this comment.
Let's transform this hardcoded inline styles into classes and put them in a css file living within this folder so Talisson' work will pick them up more easily
| value: `${p.id}::${p.path_with_namespace}`, | ||
| })) | ||
| .find((v) => v.value === selectedProject) || null | ||
| } | ||
| onChange={(v: any) => setSelectedProject(v?.value)} |
There was a problem hiding this comment.
Is there a way to get rid of the encoding here ? Ideally we would directly store an object in the state {id: number; name: string} since it exists in Res['GitlabProject']
2 participants
Add all frontend components for the GitLab integration. Final PR in the stacked series splitting #7028.
Changes
useGitlabIntegration.ts(CRUD),useGitlab.ts(projects, resources)GitLabSetupPage.tsx— data-fetching container, delegates to sub-componentsGitLabIntegrationDetails.tsx— connected state: repo selection, tagging toggle, webhook configCreateGitLabIntegrationForm.tsx— credentials input formGitLabResourcesSelect.tsx— issue/MR search for Links tabuseHasGitlabIntegrationhookContributes to #7028
Stacks on #7122
Review effort: 3/5
Review feedback addressed from #7028
GitLabIntegrationDetailscomponent (Zaimwa9)CreateGitLabIntegrationFormcomponent (Zaimwa9)GitLabSetupPagefocused on data handling only (Zaimwa9)handleLinkRepoandhandleDelete(Zaimwa9)🤖 Generated with Claude Code